<script setup>
import { ref, onMounted } from "vue";
import { getOrderPage, oneOrderAgain, reminderOrder } from "@/apis/orderApi.js";
// 导入日期格式化工具和提示组件（需先安装：npm i dayjs）
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

// 1. 订单状态映射（增加异常处理）
const orderStatusMap = [
  "待付款",
  "待接单",
  "已接单",
  "派送中",
  "已完成",
  "已取消"
];

// 2. 初始值改为数组（符合v-for循环类型）
const historyOrders = ref([]);

// 3. 获取订单列表（优化params类型、增加错误处理、预计算总价）
const getHistoryOrders = async () => {
  // params无需响应式，用普通对象
  const params = {
    page: 1,
    pageSize: 10
  };
  try {
    const res = await getOrderPage(params);
    // 预计算每个订单的总价，避免模板重复计算
    const formattedOrders = res.data.records.map(order => ({
      ...order,
      // 计算总价：amount * number 累加
      totalPrice: order.orderDetailList.reduce(
          (total, item) => total + item.amount * item.number,
          0
      ),
      // 格式化订单时间（友好显示）
      formattedTime: dayjs(order.orderTime).format("YYYY年MM月DD日 HH:mm")
    }));
    historyOrders.value = formattedOrders;
  } catch (err) {
    ElMessage.error("获取历史订单失败，请稍后重试");
    console.error("订单请求错误：", err);
  }
};

// 4. 催单功能（增加错误处理和成功提示）
const handleReminder = async (orderId) => {
  try {
    await reminderOrder(orderId);
    ElMessage.success("催单请求已发送，商家将尽快处理");
  } catch (err) {
    ElMessage.error("催单失败，请稍后重试");
    console.error("催单错误：", err);
  }
};

// 5. 再来一单（接收orderId，修复参数问题）
const handleOrderAgain = async (orderId) => {
  try {
    await oneOrderAgain(orderId);
    ElMessage.success("已为您重新创建订单，请前往结算");
    // 可添加跳转逻辑（如跳购物车/结算页）：router.push("/checkout")
  } catch (err) {
    ElMessage.error("重新下单失败，请稍后重试");
    console.error("再来一单错误：", err);
  }
};

// 页面挂载时获取订单
onMounted(() => {
  getHistoryOrders();
});
</script>

<template>
  <div class="container">
    <div class="card" style="padding-left: 10px">
      <el-tag>全部订单</el-tag>
      <el-tag type="success">待付款</el-tag>
      <el-tag type="info">退款</el-tag>
    </div>

    <!-- 订单列表 -->
    <ul class="order-list">
      <li class="order-item" v-for="item in historyOrders" :key="item.id">
        <!-- 订单时间与状态 -->
        <div class="order-header">
          <span class="order-time">{{ item.formattedTime }}</span>
          <span
              class="order-status"
              :class="`status-${item.status}`"
          >
            {{ orderStatusMap[item.status - 1] || "未知状态" }}
          </span>
        </div>

        <!-- 订单详情（商品+总价） -->
        <div class="order-details">
          <!-- 商品列表 -->
          <div class="product-list">
            <div class="product-item" v-for="product in item.orderDetailList" :key="product.id">
              <div class="product-count">
                <img
                    :src="product.image"
                    :alt="`${product.name}商品图`"
                    class="product-img"
                >
                <p class="product-name">{{ product.name }}</p>
              </div>

            </div>
          </div>

          <!-- 订单统计 -->
          <div class="order-summary">
            <p class="total-price">总价：¥{{ item.totalPrice.toFixed(2) }}</p>
            <p class="product-count">共{{ item.orderDetailList.length }}件商品</p>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="order-actions">
          <el-button
              type="primary"
              size="small"
              @click="handleReminder(item.id)"
              :disabled="!['2', '3'].includes(String(item.status))"
          >
          催单
          </el-button>
          <el-button
              type="primary"
              size="small"
              @click="handleOrderAgain(item.id)"
              :disabled="item.status === 6"
          >
          再来一单
          </el-button>
        </div>
      </li>
    </ul>

    <!-- 空状态提示 -->
    <div class="empty-tip" v-if="historyOrders.length === 0">
      暂无历史订单，快去下单吧～
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 600px;
  min-width: 200px;
  margin: 0 auto;
  padding: 1px;
}

/* 订单列表样式 */
.order-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.order-item {
  background: #ffffff;
  padding: 12px 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

/* 订单头部（时间+状态） */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.order-time {
  color: #666;
}

.order-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 12px;
}

/* 状态色（根据业务调整） */
.status-1 { background: #fff3cd; color: #ffc107; } /* 待付款 */
.status-2 { background: #d1ecf1; color: #17a2b8; } /* 待接单 */
.status-3 { background: #d4edda; color: #28a745; } /* 已接单 */
.status-4 { background: #e2f0fd; color: #007bff; } /* 派送中 */
.status-5 { background: #e9ecef; color: #6c757d; } /* 已完成 */
.status-6 { background: #f8d7da; color: #dc3545; } /* 已取消 */

/* 订单详情（商品+统计） */
.order-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.product-list {
  display: flex;
  gap: 1px; /* 商品间距 */
  overflow-x: auto; /* 商品过多时横向滚动 */
  overflow-y: hidden;
  padding-bottom: 4px;
}

.product-item {
  display: flex;
  align-items: center;
  margin-left: 10px;
  gap: 6px;
 /* min-width: 120px;*/ /* 避免挤压 */
}

.product-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover; /* 图片自适应 */
}

.product-name {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 商品名过长省略 */
}

.order-summary {
  text-align: right;
  font-size: 13px;
}

.total-price {
  color: #dc3545;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.product-count {
  color: #666;
  margin: 0;
}

/* 操作按钮 */
.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px; /* 按钮间距 */
}

/* 空状态 */
.empty-tip {
  text-align: center;
  padding: 48px 0;
  color: #999;
  font-size: 14px;
}
</style>